<template>
  <view class="index">

    <view v-if="tabberPageLoadFlag[0]" :style="{ display: currentIndex === 0 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Index ref="basic"></Index>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{ display: currentIndex === 1 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <my ref="components"></my>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{ display: currentIndex === 2 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <vip ref="vip"></vip>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{ display: currentIndex === 3 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <templatePage ref="template"></templatePage>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[4]" :style="{ display: currentIndex === 4 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <tuniao ref="about"></tuniao>
      </scroll-view>
    </view>

    <tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
      activeIconColor="tn-cool-bg-color-7" :animation="true" :safeAreaInsetBottom="true"
      @change="switchTabbar"></tn-tabbar>

  </view>
</template>

<script>
import Index from '../../componentsPage/index-list/index-list.vue'
import my from '../../componentsPage/my/my.vue'
import { checkAuth, toLogin } from '@/util/auth';
import permision from "@/js_sdk/wa-permission/permission.js"
export default {
  components: {
    Index,
    my
  },
  data() {
    return {
      // 底部tabbar菜单数据 
      tabbarList: [
        {
          title: '首页',
          activeIcon: 'home-fill',
          inactiveIcon: 'home',
          activeIconColor: 'tn-main-gradient-orangeyellow',
        },
        {
          title: '我的',
          activeIcon: 'my-fill',
          inactiveIcon: 'my',
          activeIconColor: 'tn-main-gradient-orangeyellow',
        }
      ],
      // tabbar当前被选中的序号
      currentIndex: 0,
      // 自定义底栏对应页面的加载情况
      tabberPageLoadFlag: []
    }
  },
  onLoad(options) {
    this.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')
    // 检查权限设置

    const index = Number(options.index || 0)
    // 根据底部tabbar菜单列表设置对应页面的加载情况
    this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
      return index === tabbar_index
    })
    this.switchTabbar(index)
  },

  methods: {

    async requestAndroidPermission(permisionID) {
      var result = await permision.requestAndroidPermission(permisionID)
      var strStatus
      if (result == 1) {
        strStatus = "已获得授权"
      } else if (result == 0) {
        permision.gotoAppPermissionSetting()
        strStatus = "未获得授权"
      } else {
        strStatus = "被永久拒绝权限"
      }
    },

    // 切换导航
    switchTabbar(index) {
      this._switchTabbarPage(index)
    },


    // 导航页面滚动到底部
    tabbarPageScrollLower(e) {
    },

    // 切换导航页面
    _switchTabbarPage(index) {
      if (index === 1) {
        if (!checkAuth("my", uni.getStorageSync('USER_TOKEN'))) {
          toLogin();
          return;
        }
      }
      const selectPageFlag = this.tabberPageLoadFlag[index]
      if (selectPageFlag === undefined) {
        return
      }
      if (selectPageFlag === false) {
        this.tabberPageLoadFlag[index] = true
      }
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  overflow: hidden;
  height: 100%;
}

.custom-tabbar-page {
  height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
}
</style>
